<template>
  <div>
    
    <div v-if="name == 'admin'" class="dashboard-editor-container">

      <panel-group @handleSetLineChartData="handleSetLineChartData" />

      <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">

        <div style="margin-left: 5px; margin-bottom: 20px;">
          <label style="color: rgba(122, 121, 121, 0.9);">自选查询时间范围：</label>
          <el-button type="success" @click="day()" plain>日*</el-button>
          <el-button type="primary" @click="week()" plain>周</el-button>
          <el-button type="warning" @click="month()" plain>月</el-button>
          <el-button type="danger" @click="year()" plain>年</el-button>
        </div>
        <div style="color:rgba(122,121,121,.9)">
          {{time}}{{lineTitle}}变化趋势
        </div>
        <line-chart :chart-data="lineChartData" />
      </el-row>

      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="8">
          <div class="chart-wrapper">
            <div style="color:rgba(122,121,121,.9)">公开与非公开大屏分布图</div>
            <raddar-chart />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <div class="chart-wrapper">
          <div style="color:rgba(122,121,121,.9)">模板与非模板大屏分布图</div>
            <pie-chart />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <div class="chart-wrapper">
           <!-- <bar-chart />-->
           <div style="color:rgba(122,121,121,.9)">自定义组件类别分布图</div>
            <custom-pie />
          </div>
        </el-col>
      </el-row>

      
    </div>
    <div v-else class="dashboard-editor-container">
        <user-panel />

          <el-row :gutter="20" style="margin-top:30px">
            <el-col :xs="24" :sm="24" :lg="8">
              <div class="chart-wrapper">
                <user-template-pie :username="name"/>
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8">
              <div class="chart-wrapper">
               <user-open-template-pie :username="name"/>
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8">
              <div class="chart-wrapper">
                <user-template-bar :username="name"/>
              </div>
            </el-col>
          </el-row>
    </div>
  </div>
  
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import UserPanel from './dashboard/UserPanel'
import UserTemplatePie from './dashboard/UserTemplatePie'
import UserOpenTemplatePie from './dashboard/UserOpenTemplatePie'
import CustomPie from './dashboard/CustomPie'
import UserTemplateBar from './dashboard/UserTemplateBar'
import { mapGetters } from 'vuex'
import { findFirstList, findThirdList, findForthList } from '@/api/system/dashboard'

const lineChartData = {
  // newVisitis: {
  //   //expectedData: [100, 120, 161, 134, 105, 160, 165],
  //   actualData: [120, 82, 91, 154, 162, 140, 145],
  // },
  // messages: {
  //   //expectedData: [],
  //   actualData: []
  // },
  // purchases: {
  //   //expectedData: [80, 100, 121, 104, 105, 90, 100],
  //   actualData: [100, 90, 100, 138, 142, 130, 130]
  // },
  // shoppings: {
  //   //expectedData: [130, 140, 141, 142, 145, 150, 160],
  //   actualData: [180, 82, 91, 154, 162, 140, 130]
  // }
  // countList: [],
  // createtimeList: []
}

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
    UserPanel,
    UserTemplatePie,
    UserOpenTemplatePie,
    UserTemplateBar,
    CustomPie
  },
  data() {
    return {
      lineChartData: {},
      // 时间标签
      myTimeWord: "日",
      // 时间标签样式
      myTimeTag: "success",
      // line & bar 颜色变化
      timeColor1: "",
      timeColor2: "",
      circleColor: "",
      numberColor: "",
      params:{},
      type:"newVisitis",
      time:"每日",
      lineTitle:"新增用户数",
      // registerCountList: [],
      // registerCreatetimeList: []
    }
  },
  computed:{
    ...mapGetters([
      'name'
    ]),
  },
  created() {
    // this.getFirstList();
  },
  mounted() {
    this.day();
    // this.getThirdList();
    // this.getFirstList();
  },
  methods: {
    // 查询今日数据
    day() {
      this.myTimeWord = "日";
      this.myTimeTag = "success";
      this.params["type"] = "day"
      this.timeColor1 = "#A9F387";
      this.timeColor2 = "#48d8bf";
      this.circleColor = "#A9F387";
      this.numberColor = "#48d8bf";
      this.time="每日";
      // 调用查询接口方法
      this.getData();
    },
    // 查询本周数据
    week() {
      this.myTimeWord = "周";
      this.myTimeTag = "";
      this.params["type"] = "week"
      this.timeColor1 = "#3AD3FF";
      this.timeColor2 = "#1890FF";
      this.circleColor = "#3AD3FF";
      this.numberColor = "#1890FF";
      this.time="近一周";
      // 调用查询接口方法
      this.getData();
    },
    // 查询本月数据
    month() {
      this.myTimeWord = "月";
      this.myTimeTag = "warning";
      this.params["type"] = "month"
      this.timeColor1 = "#FFE399";
      this.timeColor2 = "#FFBA00";
      this.circleColor = "#FFE399";
      this.numberColor = "#FFBA00";
      this.time="近一月";
      // 调用查询接口方法
      this.getData();
    },
    // 查询今年数据
    year() {
      this.myTimeWord = "年";
      this.myTimeTag = "danger";
      this.params["type"] = "year"
      this.timeColor1 = "#FFB6B6";
      this.timeColor2 = "#FF4949";
      this.circleColor = "#FFB6B6";
      this.numberColor = "#FF4949";
      this.time="近一年";
      // 调用查询接口方法
      this.getData();
    },
    // 查询接口方法
    getData() {

      if(this.type == 'newVisitis') {
        this.lineTitle = "新增用户数"
        this.getFirstList(this.params);

      } else if(this.type == 'purchases') {

        this.lineTitle = "大屏模板数"
        this.getThirdList(this.params);

      } else if(this.type == 'shoppings') {
        this.lineTitle = "自定义组件数"
        this.getForthList(this.params);

      }else {
        this.$message({
          message: '此数据无联动信息。',
          type: 'warning'
        });
      }
    },
    handleSetLineChartData(type) {
      //this.lineChartData = lineChartData[type]
      this.type = type;
      this.day();
      
    },
    getFirstList(parms) {
      findFirstList(parms).then(response => {
        if (response.code == 200) {
          // console.log("OvO1", response.data);
          // this.lineChartData.countList = response.data.data.count;
          // this.lineChartData.createtimeList = response.data.data.createTime;
          this.$set(this.lineChartData, 'countList', response.data.data.count);
          this.$set(this.lineChartData, 'createtimeList', response.data.data.createTime);
        }
      });
    },
    getThirdList(parms) {
      findThirdList(parms).then(response => {
        if (response.code == 200) {
          // console.log("OvO3", response.data);
          // this.lineChartData.countList = response.data.data.count;
          // this.lineChartData.createtimeList = response.data.data.createTime;
          this.$set(this.lineChartData, 'countList', response.data.data.count);
          this.$set(this.lineChartData, 'createtimeList', response.data.data.createTime);
        }
      });
    },
    getForthList(parms) {
      findForthList(parms).then(response => {
        if (response.code == 200) {
          // console.log("OvO4", response.data);
          // this.lineChartData.countList = response.data.data.count;
          // this.lineChartData.createtimeList = response.data.data.createTime;
          this.$set(this.lineChartData, 'countList', response.data.data.count);
          this.$set(this.lineChartData, 'createtimeList', response.data.data.createTime);
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
